<!DOCTYPE html>
<html>
<head>
    <title>菜单</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link href="../css/bootstrap.min.css?v=3.3.7" rel="stylesheet">

    <!-- 图标 CSS-->
    <link rel="stylesheet" href="../fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../fonts/web-icons/web-icons.css">

    <link rel="stylesheet" href="../js/plugins/elementui/index.css">
    <link rel="stylesheet" href="../js/plugins/toastr/toastr.css">

    <link rel="stylesheet" href="../public/js/elementui/index.css">
    <link rel="stylesheet" href="../public/js/toastr/toastr.css">

    <link rel="stylesheet" href="../public/plugins/ztree/css/metroStyle/metroStyle.css">

    <link rel="stylesheet" href="../css/skins/style.css" >

    <link href="../css/sys.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="../js/plugins/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../public/js/toastr/toastr.min.js"></script>
    <!-- Nestable List -->
    <script src="../js/plugins/nestable/jquery.nestable.js"></script>

    <script src="../js/common.js"></script>

    <script src="../public/plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../public/plugins/layer/layer.js"></script>
    <script src="../public/js/elementui/index.js"></script>

</head>
<body class="gray-bg">
<div class="wrapper-content" id="rrapp">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <label>平台:</label>
                    <el-radio-group v-model="plat" size="medium" @change="platChange">
                        <el-radio-button :label="item.id"
                                         v-for="item in platList"
                        >{{item.platName}}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-5 col-sm-5">
            <div class="ibox menu-left">
                <div class="ibox-title">
                    <h5>顶级菜单</h5>
                    <div class="ibox-tools">
                        <button class="btn btn-info btn-xs" @click="add">新增</button>

                        <button class="btn btn-primary btn-xs" @click="menu1SortCancel">刷新</button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="menu-mgt">
                        <p class="m-b-lg">
                            支持拖动排序。
                        </p>
                        <div class="dd" id="menu-list-1">
                            <ol class="dd-list">
                                <menu-item1 :item="item" :key="item.menuId"
                                            v-for="item in menuList"
                                            v-on:menu-click="menu1Click($event)"
                                ></menu-item1>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-md-7 col-sm-7">
            <div class="ibox menu-mid">
                <div class="ibox-title">
                    <h5>子菜单</h5>
                    <div class="ibox-tools">
                        <button class="btn btn-primary btn-xs" v-show="showOpen" @click="open">展开</button>
                        <button class="btn btn-primary btn-xs" v-show="showOpen==false" @click="close">合并</button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="menu-mgt">
                        <p class="m-b-lg">
                            支持拖动排序。
                        </p>
                        <div class="dd">
                            <menu-item1 :item="item" :key="item.menuId"
                                        v-for="item in menuList3"
                                        v-on:menu-click="menu1Click($event)"
                            ></menu-item1>
                        </div>
                        <div class="dd dd2" id="menu-list-2">
                            <ol class="dd-list">
                                <menu-item :item="item" :key="item.menuId"
                                           v-on:menu-click="menu2Click($event)"
                                           v-for="item in menuList2"></menu-item>
                            </ol>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="col-lg-5 col-md-7 col-sm-7">
            <div class="ibox menu-content">
                <div class="ibox-title">
                    <h5>内容</h5>
                    <div class="ibox-tools">
                        <button class="btn btn-primary btn-xs" v-show="showView" @click="showView=false">编辑</button>
                        <button class="btn btn-primary btn-xs" v-show="showView==false" @click="saveMenu">保存</button>
                        <button class="btn btn-cancel btn-xs" v-show="showView==false" @click="showView=true">取消
                        </button>
                    </div>
                </div>
                <div class="ibox-content panel-vue">
                    <div class="menu-mgt">
                        <el-form class="form-horizontal" :model="sysMenu" ref="sysMenuForm" :rules="rules">

                            <el-row class="form-group">
                                <el-col :xs="24" :span="4" class="control-label">
                                    <span>类型:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="type">
                                        <el-radio-group v-show="!showView" v-model="sysMenu.type">
                                            <el-radio v-for="(item,index) in typeList" :label="item.value">
                                                {{item.text}}
                                            </el-radio>
                                        </el-radio-group>
                                        <div class="el-view-content" v-show="showView">{{typeMap[sysMenu.type]}}</div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row class="form-group">
                                <el-col :xs="24" :span="4" class="control-label">
                                    <span>菜单名称:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="name">
                                        <el-input v-show="!showView" v-model="sysMenu.name"
                                                  auto-complete="off">
                                            <template slot="prepend" >
                                                <span class="label label-info" v-if="sysMenu.icon != null"
                                                      style="cursor: pointer"
                                                      @click="dialogIconVisible = true"><i
                                                        :class="sysMenu.icon"></i></span>
                                                <span class="label" v-if="sysMenu.icon == null" style="cursor: pointer"
                                                      @click="dialogIconVisible = true"><i
                                                        class="fa fa-square-o"></i></span>
                                            </template>
                                        </el-input>
                                        <div class="el-view-content" v-show="showView">
                                            <span class="label label-info" v-if="sysMenu.icon != null">
                                                <i :class="sysMenu.icon"></i>
                                            </span>
                                            <span class="label" v-if="sysMenu.icon == null" >
                                                <i class="fa fa-square-o"></i>
                                            </span>
                                            {{sysMenu.name}} [{{sysMenu.menuId}}]
                                        </div>
                                        <el-dialog title="选择图标" width="550px" height="450px"
                                                   :visible.sync="dialogIconVisible">
                                            <div class="popover-content">
                                                <div class="iconpicker">
                                                    <div class="iconpicker-items">
                                                        <a href="#" class="iconpicker-item"
                                                           @click="selectIcon(item)"
                                                           v-for="item in icons"
                                                           :title="item">

                                                            <i :class="['fa', 'fa-'+item]"></i>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-dialog>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row class="form-group">
                                <el-col :xs="24" :span="4" class="control-label">
                                    <span>父菜单:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="parentId" @click="menuTree">
                                        <input type="text" class="el-input__inner" v-show="!showView"
                                               style="cursor:pointer;" v-model="sysMenu.parentName" @click="menuTree"
                                               readonly="readonly" placeholder="一级菜单"/>
                                        <div class="el-view-content" class="el-view-content" v-show="showView">
                                            {{sysMenu.parentName}}
                                        </div>
                                    </el-form-item>

                                </el-col>
                            </el-row>

                            <el-row class="form-group" v-if="sysMenu.type == 1">
                                <el-col :xs="24" :span="4" class="control-label">
                                    <span>菜单URL:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="url">
                                        <el-input v-show="!showView" v-model="sysMenu.url" placeholder="菜单URL"
                                                  auto-complete="off"></el-input>
                                        <div class="el-view-content" v-show="showView"> {{sysMenu.url}}</div>
                                    </el-form-item>

                                </el-col>
                            </el-row>
                            <el-row class="form-group">
                                <el-col :xs="24" :span="4"  class="control-label">
                                    <span>状态:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="status">
                                        <el-radio-group v-show="!showView" v-model="sysMenu.status">
                                            <el-radio v-for="(item,index) in statusList" :label="item.value">{{item.text}}</el-radio>
                                        </el-radio-group>
                                        <div class="el-view-content" v-show="showView">{{statusMap[sysMenu.status]}}</div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row class="form-group" v-if="sysMenu.type == 1 || sysMenu.type == 2">
                                <el-col :xs="24" :span="4" class="control-label-3 ">
                                    <span>授权标识:</span>
                                </el-col>
                                <el-col :xs="24" :span="20">
                                    <el-form-item prop="perms">
                                        <el-input v-show="!showView" v-model="sysMenu.perms" type="textarea" :rows="3"
                                                  placeholder="多个用逗号分隔，如：user:list,user:create"
                                                  auto-complete="off"></el-input>
                                        <div class="el-view-content" style="word-wrap:break-word ;" v-show="showView">
                                            {{sysMenu.perms}}
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    
	<el-dialog title="新增菜单" :visible.sync="addView" width="550px" height="450px">
		<div class="menu-add panel-vue ">
		  <el-form class="form-horizontal" :model="sysMenuAdd" ref="addMenuForm" :rules="rules">
	                            <el-row class="form-group">
	                                <el-col :xs="24" :span="4" class="control-label">
	                                    <span>类型:</span>
	                                </el-col>
	                                <el-col :xs="24" :span="20">
	                                    <el-form-item prop="type">
	                                        <el-radio-group  v-model="sysMenuAdd.type">
	                                            <el-radio v-for="(item,index) in typeList" :label="item.value">
	                                                {{item.text}}
	                                            </el-radio>
	                                        </el-radio-group>
	                                    </el-form-item>
	                                </el-col>
	                            </el-row>
	
	                            <el-row class="form-group">
	                                <el-col :xs="24" :span="4" class="control-label">
	                                    <span>菜单名称:</span>
	                                </el-col>
	                                <el-col :xs="24" :span="20">
	                                    <el-form-item prop="name">
	                                        <el-input  v-model="sysMenuAdd.name"
	                                                  auto-complete="off">
	                                            <template slot="prepend" >
	                                                <span class="label label-info" v-if="sysMenu.icon != null"
	                                                      style="cursor: pointer"
	                                                      @click="dialogIconVisible = true"><i
	                                                        :class="sysMenuAdd.icon"></i></span>
	                                                <span class="label" v-if="sysMenuAdd.icon == null" style="cursor: pointer"
	                                                      @click="dialogIconVisible = true"><i
	                                                        class="fa fa-square-o"></i></span>
	                                            </template>
	                                        </el-input>

	                                    </el-form-item>
	                                </el-col>
	                            </el-row>
	
	                            <el-row class="form-group">
	                                <el-col :xs="24" :span="4" class="control-label">
	                                    <span>父菜单:</span>
	                                </el-col>
	                                <el-col :xs="24" :span="20">
	                                    <el-form-item prop="parentId" @click="menuTree">
	                                        <input type="text" class="el-input__inner"
	                                               style="cursor:pointer;" v-model="sysMenuAdd.parentName" @click="menuTree"
	                                               readonly="readonly" placeholder="一级菜单"/>
	                                    </el-form-item>
	
	                                </el-col>
	                            </el-row>
	
	                            <el-row class="form-group" v-if="sysMenuAdd.type == 1">
	                                <el-col :xs="24" :span="4" class="control-label">
	                                    <span>菜单URL:</span>
	                                </el-col>
	                                <el-col :xs="24" :span="20">
	                                    <el-form-item prop="url">
	                                        <el-input  v-model="sysMenuAdd.url" placeholder="菜单URL"
	                                                  auto-complete="off"></el-input>
	                                    </el-form-item>
	                                </el-col>
	                            </el-row>
	
	                            <el-row class="form-group" v-if="sysMenuAdd.type == 1 || sysMenuAdd.type == 2">
	                                <el-col :xs="24" :span="4" class="control-label-3 ">
	                                    <span>授权标识:</span>
	                                </el-col>
	                                <el-col :xs="24" :span="20">
	                                    <el-form-item prop="perms">
	                                        <el-input  v-model="sysMenuAdd.perms" type="textarea" :rows="3"
	                                                  placeholder="多个用逗号分隔，如：user:list,user:create"
	                                                  auto-complete="off"></el-input>
	                                    </el-form-item>
	
	                                </el-col>
	                            </el-row>



              <el-row class="form-group" >
                  <el-col class="text-center" :span="24">
                      <el-button @click="addView = false">取 消</el-button>
                      <el-button type="primary" @click="addMenu">确 定</el-button>
                  </el-col>
              </el-row>

		    </el-form-item>
		  </el-form>
		</div>
	</el-dialog>

    <el-dialog title="选择图标" width="550px" height="450px"
               :visible.sync="dialogIconVisible">
        <div class="popover-content">
            <div class="iconpicker">
                <div class="iconpicker-items">
                    <a href="#" class="iconpicker-item"
                       @click="selectIcon(item)"
                       v-for="item in icons"
                       :title="item">

                        <i :class="['fa', 'fa-'+item]"></i>
                    </a>
                </div>
            </div>
        </div>
    </el-dialog>
</div>
<!-- 选择菜单 -->
<div id="menuLayer" style="display: none;padding:10px;">
    <ul id="menuTree" class="ztree"></ul>
</div>
<script src="../sys/js/menu.js"></script>
</body>
</html>
